<template>
    <div class="my_header">
        <div class="left">
            <van-icon name="bars" size="22"/>
        </div>
        <div class="content">
            <div :class="{active:currentTag===1}" @click="handleClick(1)">我的</div>
            <div :class="{active:currentTag===2}" @click="handleClick(2)">发现</div>
            <div :class="{active:currentTag===3}" @click="handleClick(3)">云村</div>
            <div :class="{active:currentTag===4}" @click="handleClick(4)">视频</div>
        </div>
        <div class="right">
            <van-icon name="search" size="22":class=" {active:currentTag===5} "@click="handleClick(5)"/>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import router from '@/router/index.js';

let currentTag = ref(2)
const handleClick=(tag)=>{
    console.log(tag);
    currentTag.value=tag
    router.push({name:tag===1?'mine':tag===2?'discover':tag===3?'yun':tag===4?'video':'seach'})
}

</script>
<style scoped>
.my_header {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
}
.my_header .content{
    display: flex;
    width: 180px;
    justify-content: space-around;
}
</style>